<template>
  <div class="i-layout-goods">
    <ScreenBase :config="select" type="first" :fieldKey="fieldKey" />
    <hr class="i-line">
    <el-alert :title="tips.title" type="info" :description="tips.body" show-icon>
    </el-alert>
    <TableBase :config="table" :fieldKey="fieldKey" :init="set_url"/>
    <el-pagination @current-change="changePage" :current-page="current[fieldKey]" :page-size="size[fieldKey]" layout="total, prev, pager, next, jumper" :total="total[fieldKey]">
    </el-pagination>
  </div>
</template>
<script type="text/javascript">
import ScreenBase from '@/components/ScreenBase'
import FormBase from '@/components/FormBase'
import TableBase from '@/components/TableBase'
import AllConfig from './all_config.js'


//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('synthesize')

//import { get_order_all } from '@/api/order'

export default {
  props: {
    value: [Array, Object]
  },
  components: {
    ScreenBase,
    FormBase,
    TableBase
  },
  data() {
    return {
      tips: AllConfig.tips,
      select: AllConfig.select,
      table: AllConfig.table,
      page: AllConfig.page,


      // 组件生成唯一码
      fieldKey: null,
      // 分页的关键字
      // keyword:'first',                                     
      // 初始化表格组件数据
      set_url: {
        "total": { model: "goods", action: "get_goods_total" },
        "get": { model: "goods", action: "get_goods_all" },
        "edit": { model: "goods", action: "on_goods_edit" }
      },
    }
  },

  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    ...mapState(['total','size','current'])
  },

  mounted() {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  created() {
      // 生成唯一key值码
      this.fieldKey = 'xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
          var r = Math.random() * 16 | 0,
              v = c == 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
      });


      this.setSize({key:this.fieldKey,value:this.page_size});
      this.setCurrent({key:this.fieldKey,value:this.page_current});
      this.setPage(this.fieldKey);
      this.setTotal({key:this.fieldKey,value:this.page_total})
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['setCurrent','setSize','setPage','setTotal']),
    ...mapActions(['onCurrentChange']),
    changePage(num) {
      this.onCurrentChange({ key: this.fieldKey, data: num })
    }

  }
}

</script>
<style type="text/css" lang="scss">
.i-layout-goods {
  .el-table {
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .box-card {
    margin: 20px;
  }

  .el-form-item {
    margin-bottom: 5px;
  }

  .i-line {
    border: 1px ridge;
  }

  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
}

</style>
